<template>
  <div>
    <h3>商品列表</h3>
    <div>
      <el-table :data="list" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 id">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="所有分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <!-- <template slot-scope="img"> -->
                <!-- <span>{{ props.row.imgUrl }}</span> -->
                <img :src="props.row.imgUrl" style="width:200px;height:200px"/>
                <!-- </template> -->
              </el-form-item>
              <el-form-item label="商品评价">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.goodsDesc }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price.toFixed(2) }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.ctime }}</span>
              </el-form-item>
              <el-form-item label="商品销量">
                <span>{{ props.row.sellCount }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" prop="name">
        </el-table-column>
        <el-table-column align="center" label="所有分类" prop="category">
        </el-table-column>
        <el-table-column align="center" label="商品价格">
          <template slot-scope="props">
            ￥{{ props.row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品图片">
          <template slot-scope="list">
            <img :src="list.row.imgUrl" style="width: 120px; height: 120px" />
          </template>
        </el-table-column>

        <el-table-column align="center" label="商品描述" prop="goodsDesc">
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="data">
            <el-button size="mini" @click="clickedit(data.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="clickDel(data.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @current-change="pagechange"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 30px"
      >
      </el-pagination>

      <!-- 编辑蒙层框 -->
      <el-dialog :visible.sync="showeditboard" width="31%">
        <div>
          <span tyle="margin-left:10px">id</span>
          <el-input
            style="width: 350px; margin-left: 50px"
            placeholder="id"
            v-model="editobj.id"
            disabled
          />
        </div>
        <div style="margin-top: 20px">
          <span tyle="margin-left:10px">商品名称</span
          ><el-input
            style="width: 350px; margin-left: 10px"
            placeholder="商品名称"
            v-model="editobj.name"
          />
        </div>
        <div style="margin-top: 30px">
          <span>商品分类</span>
          <el-select
            v-model="editobj.value"
            placeholder="请选择商品分类"
            style="width: 350px; margin-left: 10px"
          >
            <el-option
              v-for="item in categories"
              :key="item.cateName"
              :label="item.cateName"
              :value="item.cateName"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 30px">
          <span>商品价格</span>
          <el-input-number
            v-model="editobj.price"
            @change="handleChange"
            :min="0"
            label="描述文字"
            style="margin-left: 10px"
          ></el-input-number>
        </div>
        <div style="margin-top: 30px; display: flex">
          <span style="line-height: 150px">商品图片</span>
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            :show-file-list="false"
            :on-success="imgUploadSucess"
            style="margin-left: 10px"
          >
            <img style="width: 100px; height: 100px" :src="editobj.imgUrl" />
          </el-upload>
        </div>
        <div style="margin-top: 30px; display: flex">
          <span>商品描述</span>
          <el-form style="margin-left: 10px">
            <el-input
              type="textarea"
              v-model="editobj.goodsDesc"
              style="width: 350px; height: 50px"
            ></el-input>
            <!-- </el-form-item> -->
          </el-form>
        </div>
        <el-button
          @click="clickReqEdit"
          style="margin-top: 40px; margin-left: 150px"
          >确认编辑</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getshoplist, shopDel, allshopsort, goodedit } from "@/apis/user";
export default {
  data() {
    return {
      pagesize: 6, //请求的条数
      total: 34, //总条数
      curpage: 1,
      list: [],
      imgUrl: "",
      showeditboard: false,
      editobj: {}, //编辑对象
      categories: [],
    };
  },
  //进来都有数据
  created() {
    //刷新
    this.retable();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    //改变当前页面
    pagechange(page) {
      this.curpage = page;
      this.retable();
    },
    //发送请求
    retable() {
      
      //判断节点流
      if(this.ordermanager){
        this.$message({
          message:'你的操作频换快'
        })
        return
      }
      //设置节点流
      this.ordermanager=true

      setTimeout(()=>{
        this.ordermanager=false
      },1500)
      getshoplist({ currentPage: this.curpage, pageSize: this.pagesize }).then(
        (res) => {
          // console.log(res);
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },
    clickDel(id) {
      shopDel({ id }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.retable();
        }
      });
    },

    //点击编辑
    clickedit(row) {
      // console.log(row);
      allshopsort().then((res) => {
        this.categories = res.data.categories;
      });
      this.editobj = JSON.parse(JSON.stringify(row));
      this.showeditboard = true;
    },
    imgUploadSucess(res) {
      this.imgUrl = res.imgUrl;

      //修改当前编辑的图片地址
      let oldImg = this.editobj.imgUrl;
      let serverIp = oldImg.substring(0, oldImg.lastIndexOf("/") + 1);
      //拼接改变图片地址
      this.editobj.imgUrl = serverIp + res.imgUrl;
    },

    //点击确认编辑
    clickReqEdit() {
      //发送修改商品的接口
      goodedit({
        name: this.editobj.name,
        category: this.editobj.category,
        price: this.editobj.price,
        imgUrl: this.imgUrl,
        goodsDesc: this.editobj.goodsDesc,
        id: this.editobj.id,
      }).then((res) => {
        if (res.data.code == 0) {
          this.showeditboard = false; //关窗
          this.$message({
            message: "商品修改成功!",
            type: "success",
          });

          this.retable(); //刷新表格数据
        }
      });
    },
  },
};
</script>

<style lang="less">
.el-main[data-v-fae5bece] {
  line-height: 10px;
  text-align: left;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
h3 {
  font-weight: normal;
  border-bottom: 1px solid #eceef4;
  height: 40px;
}
</style>